<template>
  <div class="body">
    <div class="title">
      <div class="search">
        <el-form>
          <el-input
            v-model="searchContent"
            placeholder="根据用户搜索"
            ref="inputt"
          ></el-input>
        </el-form>
        <el-button style="margin-left: 6px" @click="resetForm">清空</el-button>
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
      <div>
        <el-button type="success" class="add" @click="adduesr"
          ><i class="el-icon-edit"></i>新增用户</el-button
        >
      </div>
    </div>
    <div class="alert"><i class="el-icon-info"></i> 共{{pagesizetall.counts}}条记录</div>
    <!-- 表格内容 -->
    <el-table
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      :header-cell-style="{
        background: '#fafafa',
        color: '#909399',
        borderBottom: '2px #ccc solid',
      }"
    >
      <el-table-column prop="num" label="序号" type="index" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="phone" label="联系电话" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="permission_group_title" label="权限组织名" />
      <el-table-column prop="role" label="角色" />
      <el-table-column prop="address" label="操作">
  <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="editRow(scope.row)"
          ></el-button>
           <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delRow(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagetoll :total="counts"
     :paginationPage="xlist.page"
     :paginationPagesize="xlist.pagesize"
     @pageChange="pageChange"
     @pageSizeChange="pageSizeChange"
      ></pagetoll>
    <!-- 提示框 -->
    <el-dialog :title="formBase.id ? '编辑':'添加'"
     :before-close="beforeClose"
      :visible.sync="dialogVisible" width="50%">
      <el-form
        :rules="ruleInline"
        ref="dataForm"
        :model="formBase"
        label-position="left"
        label-width="120px"
        style="width: 400px; margin-left: 120px"
      >
       <el-form-item :label="$t('table.email')" prop="email">
          <el-input v-model="formBase.email"></el-input>
        </el-form-item>
           <el-form-item :label="$t('table.phone')" prop="phone">
          <el-input v-model="formBase.phone"></el-input>
        </el-form-item>
        <el-form-item :label="$t('table.username')" prop="username">
          <el-input v-model="formBase.username"></el-input>
        </el-form-item>

        <!-- 根据弹框里面是否有id来取决是否有密码这个输入框 没有id的话就给他隐藏了-->
        <el-form-item
          label="密码"
          prop="password"
          :class="{isShow:formBase.id}"
        >
          <el-input v-model="formBase.password"></el-input>
        </el-form-item>

        <!-- 角色 -->
        <el-form-item :label="$t('table.role')" prop="role">
          <el-input v-model="formBase.role"></el-input>
        </el-form-item>
        <!-- 权限组 -->
        <el-form-item
          :label="$t('table.permissionUser')"
          prop="permission_group_id"
        >
          <el-select class="filter-item" v-model="formBase.permission_group_id">
            <el-option
              v-for="item in PermissionGroupsList"
              :value="item.id"
              :key="item.key"
              :label="item.title"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('table.introduction')">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="Please input"
            v-model="formBase.introduction"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="beforeClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, detail, update, remove } from '../../api/base/users'
import { simple } from '../../api/base/permissions'

import pagetoll from '../../module-manage/components/page-tool.vue'
export default {
  components: {
    pagetoll
  },
  data () {
    return {
      // 弹框表单
      formBase: {
        phone: '',
        email: '',
        permission_group_id: '',
        role: '',
        username: '',
        introduction: '',
        password: ''
      },
      pagesizetall: {},
      Id: '',
      // 渲染的列表
      xlist: {
        page: 1,
        pagesize: 5,
        username: ''
      },
      counts: '', // 总页数
      dialogVisible: false,
      searchContent: '', // 搜索框里面的值
      tableData: [],
      // 权限小组的列表
      PermissionGroupsList: [],
      // 校验规则
      ruleInline: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
        phone: [{ required: true, message: '电话不能为空', trigger: 'blur' }],
        permission_group_id: [
          { required: true, message: '必须选择', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        role: [{ required: true, message: '角色不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.list()
  },
  methods: {
    // 分页 进入某一页
    pageChange (val) {
      this.xlist.page = val
      this.list()
    },
    // 一页显示多少信息
    pageSizeChange (value) {
      this.xlist.pagesize = value
      this.list()
    },
    // 渲染列表表格
    async list () {
      const { data } = await list(this.xlist)
      this.tableData = data.list
      // console.log(data)
      this.counts = data.counts
      this.pagesize = data.pagesize
      this.page = data.page
      this.pagesizetall = data
    },
    // 搜索按钮
    async search () {
      const { data } = await list({ ...this.xlist, username: this.searchContent })

      this.tableData = data.list
      this.counts = data.counts
      this.pagesize = data.pagesize
      this.page = data.page
      this.pagesizetall = data
    },
    // 清空
    resetForm () {
      this.$refs.inputt.value = ''
    },
    // 删除列表
    delRow (id) {
      console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.list()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击添加
    async adduesr () {
      this.dialogVisible = true
      // 权限列表
      const { data } = await simple()
      this.PermissionGroupsList = data
      console.log(data)
    },
    // 新增员工弹框提交
    async submit () {
      try {
        if (this.formBase.id) {
          await update(this.formBase)
        } else {
          await add(this.formBase)
        }
      } finally {
        this.beforeClose()
        this.list()
      }
      // 关闭弹框

      // 重新渲染
      this.list()
    },
    // 编辑
    async  editRow (editRow) {
      this.dialogVisible = true
      const res = await detail(editRow.id, {
        id: editRow.id
      })
      this.Id = editRow.id
      // 回显数据，把row里面的东西给到表单，因为和请求体中的参数不一样
      Object.keys(this.formBase).forEach(key => {
        this.formBase[key] = editRow[key]
      })
      this.formBase.id = editRow.id
      this.list()
      // console.log(editRow)
    },
    // 关闭弹框手动清除id
    beforeClose () {
      this.formBase = {
        phone: '',
        email: '',
        permission_group_id: '',
        role: '',
        username: '',
        introduction: ''
      }
      this.$refs.dataForm.resetFields()
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="less">
.body {
  box-sizing: border-box;
  padding: 20px;
  max-width: 100%;
  margin: 10px 20px;
  background-color: #fff;
  color: #303133;
  .alert {
    height: 35px;
    width: 100%;
    padding-left: 16px;
    margin: 15px 0;
    border-radius: 3px;
    background-color: #f4f4f4;
    line-height: 35px;
    color: #909399;
    font-size: 13px;
  }
  .title {
    display: flex;
    justify-content: space-between;
  }
  .search {
    display: flex;
    justify-content: space-evenly;
  }
  .isShow{
    display: none;
  }
}
</style>
